
import { ConfigProvider, Input, Button, Table, Switch, Select, Checkbox } from 'antd';
import { useState, useEffect } from 'react';
import zh_CN from 'antd/es/locale/zh_CN';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate,useLocation } from 'react-router-dom';
import '../../css/public.less'
import './Css/AddCommodity/AddCommodity.less'
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import { allBrandApi,twoApi,elaseApi } from '../../../api/wj'

function AddCommodity() {
    //表格数据类型
    interface DataType {
        key: React.Key; //id
        id:number
        number: number //序号
        img: string //图片
        goodsTitle: string//商品名称
        shopID: string //货号
        price: string //价格
        classify: string //分类
        brand: string//品牌
        salesVolume: number //销量
    }
    interface List {
        value: string,
        label: string
    }
    interface searchProp {
        // "brand": 0,//平排名
        // "name": "string", 商品
        // "one": 0, 
        // "pro": 0,促销id
        // "sort": 0,
        // "two": 0
        name: string | null,
        brand: any,
        one: number|undefined,
        two: number |null |undefined,
        pro:number |null,
        // checked: CheckboxValueType[] | null | undefined
        sort?:number | null
    }
    //input 值
    const [name, setName] = useState<string | null>('')
    // 一级搜索值 
    const [one, setOne] = useState<string | null>()
    // 二级搜索值
    const [two, setTwo] = useState<string | null>()
    //select 值
    const [brand, setBrand] = useState<{ id: number, choose: string } | null>()
    const [proNumber,setProNumber] = useState()
    //多选框选中的值
    const [checked, setChecked] = useState<CheckboxValueType[] | null | undefined>()
    //销售的数据
    const [value,setValue] = useState<any>()
    //路由跳转
    const navigate = useNavigate()
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'id',
        },
        {
            title: '商品图片',
            dataIndex: 'img',
            render: (_, v) => (
                <p>{v.img}</p>
            )
        },
        {
            title: '商品名称',
            dataIndex: 'name',
        },
        {
            title: '货号',
            dataIndex: 'sernum',
        },
        {
            title: '价格',
            dataIndex: 'price',
        },
        {
            title: '分类',
            dataIndex: 'rec',
        },
        {
            title: '品牌',
            dataIndex: 'brand',
        },
        {
            title: '销量',
            dataIndex: 'sell',
        },
        {
            title: '操作',
            dataIndex: 'address',
            render: (_, v) => (
                <div className='operationList'>
                    <button className='man' onClick={() => { commodityBtn(v) }}>添加</button>
                </div>
            )
        },
    ];
    //点击添加
    const commodityBtn = (v: {}) => {
        console.log('查看点击 事件获取到的', v);
    }
    //select下拉选项框里的具体选项
    const [switchList, setSwitchList] = useState<{ id: number, name: string }[]>([])
    //一级分类
    const [oneList, setOneList] = useState<List[]>([])
    //二级分类
    const [twoList, setTwoList] = useState<List[]>([])
    //总筛选需要的内容
    const [searchList, setSearchList] = useState<searchProp>({
        name: null,
        brand: null,
        one: null,
        pro:null,
        two: null,
        // checked: null,
        sort:null,
    })
    const [count,setCount] = useState<number>()//用条数
    //多选框
    const options = [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' },
    ];
    //当前页码
    const [nowPage, setNowPage] = useState<number>(1)
    //总条数
    const [totalPage,setTotalPage] = useState<number>(5)
    useEffect(()=>{
        const por = JSON.parse(sessionStorage.getItem('value'))
        setValue(por)
        // setProNumber(value.id)
    },[])
    console.log('存的东西',value);
    
    useEffect(() => {
        getallBrand()
    }, [])
    const getallBrand = async () => {
        try {
            let res = await allBrandApi()
            //allOne:所有一级分类，allBrand:所有品牌
            console.log("商品列表", res.data);
            if(res.code=='200'){
                //存储一级列表
                let newList = res.data.allOne.map(item=>{
                    return {value:item.id,label:item.name}
                })
                setOneList(newList)
                //存储品牌
                setSwitchList(res.data.allBrand)
            }
        } catch (err) {
            console.log(err);
        }
    }

    useEffect(()=>{
        getValue()
    },[nowPage,totalPage])
    const getValue=()=>{
        elaseApi({pro:value}).then(res=>{
            console.log('res',res);
            setData(res.data.goods)
            setCount(res.data.total)
        }).catch(err=>{
            console.log(err);
            
        })
    }
    //表格方法(勾选的内容)
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    //用户数据
    const [data,setData] = useState()
    //发起获取请求
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        //switch勾选的内容
        console.log('selectedRowKeys changed switch勾选的内容: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        console.log('SelectedRowKeys', selectedRowKeys);
    };
    const rowSelection = {
        // selectedRowKeys,
        onChange: onSelectChange,
    };
    //选项框的值
    const { Option } = Select;
    //onGenderChang选项框事件
    const onGenderChange = (value: string | number) => {
        console.log('onGenderChange===>',value);
        setBrand(value)
        console.log('state', brand);
    };
    //input 输入框的值
    const onInputChange = (e: any) => {
        // console.log('input的值',e.target.value);
        let name = e.target.value
        setName(name)
        console.log('name', name);
    }
    //等级选框1
    const lv1 = (value: string) => {
        console.log('等级1选项', value);
        setOne(value)
        twoApi({id:value}).then(res=>{
            console.log(res);
            if(res.code=='200'){
                let newList = res.data.map(item=>{
                    return{value:item.id,babel:item.name}
                })
                setTwoList(newList)
            }
        }).catch(err=>{
            console.log(err);
            
        })
    }
    //当前页码和页数
    const changePage=(page: number, pageSize: number):void=>{
        console.log('页码变了了', page, pageSize);
        setNowPage(page),
        setTotalPage(pageSize)
    }
    //等级选框2
    const lv2 = (value: string) => {
        console.log('等级2选项', value);
        setTwo(value)
    }
    //跳转到添加商品页面
    const AddCommodityBtn = () => {
        console.log('点击了添加按钮');
    }
    //多选框change事件
    const onChange = (checkedValues: CheckboxValueType[]) => {
        console.log('checked = ', checkedValues);

        setChecked(checkedValues)
    };
    useEffect(() => {
        setSearchList({
            name: name,
            brand: brand,
            one: one,
            two: two,
            pro:value,
            // checked: checked
        })
    }, [name, brand, one, two, checked])
    //点击筛选(查询)
    const filtrateBtn = () => {
        // "brand": 0,
        // "name": "string",
        // "one": 0,
        // "pro": 0,促销id
        // "sort": 0,
        // "two": 0
        setSearchList({
            name: name,
            brand: brand,
            one: one,
            two: two,
            pro:value,
            // checked: checked
        })
        console.log('搜索的内容', searchList);
        elaseApi(searchList).then(res=>{
            console.log('res',res);
            
        }).catch(err=>{
            console.log(err);
            
        })
    }
    //重置按钮
    const rest = () => {
        console.log(searchList);
    }
    return (
        <div className='ADDCOMMODITY'>
            {/* 头部 */}
            <div className='page-top'>
                <div className='page-title'>
                    <p>添加商品</p>
                </div>
            </div>
            <div className='page-content'>
                {/* 查询部分 */}
                <div className='filtrate-search2'>
                    <p className='title'>筛选查询</p>
                    <div className='inputBox'>
                        <div>
                            <p>关键词：</p>
                            <Input
                                placeholder="输入关键词"
                                onChange={onInputChange}
                            />
                        </div>
                        <div>
                            <p>品牌：</p>
                            <Select
                                placeholder="请选择品牌"
                                onChange={onGenderChange}
                                allowClear
                                style={{ width: 120 }}
                            >
                                {switchList.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>
                                })}
                            </Select>
                        </div>
                        <div>
                            <p className='spa'>添加时间：</p>
                            <Select
                                defaultValue="等级1"
                                style={{ width: 120 }}
                                allowClear
                                onChange={lv1}
                                options={oneList}
                            />
                            ~
                            <Select
                                defaultValue="等级2"
                                style={{ width: 120 }}
                                allowClear
                                onChange={lv2}
                                options={twoList}
                            />
                            {/* <DatePicker onChange={onChangeDate} className='dataList' renderExtraFooter={() => 'extra footer'} showTime /> */}
                        </div>
                        {/* <div className='checkBoxLIst'>
                            <p>筛选标签:</p>
                            <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
                        </div> */}
                    </div>
                    <div className='buttonType'>
                        <button className='reset' onClick={rest}>重置</button>
                        <button className='filter' onClick={filtrateBtn}>筛选</button>
                    </div>
                </div>
                {/* 内容部分 */}
                <div className='data-list'>
                    <div className='headChoose'>
                        {/* 标题 */}
                        <p>商品列表</p>
                        <div>
                            {/* 排序方式 */}
                            <button className='del'>排序方式</button>
                            {/* 添加按钮 */}
                            <button className='add' onClick={AddCommodityBtn}>添加商品</button>
                        </div>
                    </div>
                    <div className='contentType'>
                        <div style={{ marginBottom: 16 }}>
                        </div>
                        <ConfigProvider locale={zh_CN}>
                            <Table rowSelection={rowSelection}
                                columns={columns}
                                dataSource={data}
                                scroll={{ y: 444 }}
                                rowKey={item=>item.id}
                                pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: 5,
                                    pageSizeOptions: [3, 5, 10, 15],
                                    showQuickJumper: true,
                                    showSizeChanger: true,
                                    total:count,
                                    onChange: changePage
                                }} />
                        </ConfigProvider>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default AddCommodity
//添加商品页面